<template>
	<view class="pd pm200">
		<view class="kxczxcstreszxr pd pt30 pm20 mt20">
			<view class="fz32 display-flex pr">
				<view class="flex-1">
					<text class="kkxczxerwt">基本信息</text>
				</view>
			</view>
			<view class="btm mt20 pt20">
				<view class="pt10 pm10 display-flex fz30 z6">
					<view class="xczvrytxctrtr vertical-center tl">
						职位名称:
					</view>
					<view class="z3 flex-1">
						<input type="text" v-model="dataForm.name" class="kxcxzrtrtxr pl20" placeholder="请输入职位名称" />
					</view>
				</view>
				<view class="pt10 pm10 display-flex fz30 z6 btm pt20 pm20" @tap="kmxcxfer=true">
					<view class="xczvrytxctrtr vertical-center tl">
						公司:
					</view>
					<view class="z3 flex-1">
						<text class="z3" v-if="dataForm.companyName">{{dataForm.companyName}}</text>
						<text class="z9" v-else>请选择公司</text>
					</view>
					<view class=" vertical-center">
						<text class="iconfont icon-rightyou"></text>
					</view>
				</view>
				<view class="pt10 pm10 display-flex fz30 z6 btm pt20 pm20" @tap="kmxcxferb=true">
					<view class="xczvrytxctrtr vertical-center tl">
						招聘人:
					</view>
					<view class="z3 flex-1">
						<text class="z3" v-if="dataForm.sysUserName">{{dataForm.sysUserName}}</text>
						<text class="z9" v-else>请选择招聘人</text>
					</view>
					<view class=" vertical-center">
						<text class="iconfont icon-rightyou"></text>
					</view>
				</view>

				<view class="pt10 pm10 display-flex fz30 z6 btm">
					<view class="xczvrytxctrtr vertical-center tl">
						日领薪酬:
					</view>
					<view class="z3 flex-1">
						<input type="number" v-model="dataForm.pay" class="kxcxzrtrtxr pl20" placeholder="请输入日领薪酬" />
					</view>
					<view class=" vertical-center ml20">
						元
					</view>
				</view>
				<view class="pt10 pm10 display-flex fz30 z6 btm">
					<view class="xczvrytxctrtr vertical-center tl">
						综合薪水:
					</view>
					<view class="z3 flex-1">
						<input type="number" v-model="dataForm.payOverall" class="kxcxzrtrtxr pl20"
							placeholder="请输入综合薪水" />
					</view>
					<view class=" vertical-center ml20">
						元
					</view>
				</view>
				<view class="pt10 pm10 display-flex fz30 z6 btm pt20 pm20">
					<view class="xczvrytxctrtr vertical-center tl">
						招聘时间:
					</view>
					<view class="z3 flex-1">
						<picker mode="date" @change="xczxsdrf">
							<text v-if="dataForm.jobDate" class="z3">{{dataForm.jobDate}}</text>
							<text class="z9" v-else>请选择招聘时间</text>
						</picker>
					</view>
					<view class=" vertical-center">
						<text class="iconfont icon-rightyou"></text>
					</view>
				</view>
				<view class="pt10 pm10 display-flex fz30 z6 btm pt20 pm20" @tap="kmxcxferc=true">
					<view class="xczvrytxctrtr vertical-center tl">
						招聘类型:
					</view>
					<view class="z3 flex-1">
						<template v-for="item in kjmxcrr">
							<view class="xcxerexr act" v-if="item.cls">
								{{item.dictLabel}}
							</view>
						</template>


					</view>
					<view class=" vertical-center">
						<text class="iconfont icon-rightyou"></text>
					</view>
				</view>
				<view class="pt10 pm10 display-flex fz30 z6 btm pt20 pm20" @tap="kmxcxferd=true">
					<view class="xczvrytxctrtr vertical-center tl">
						标签:
					</view>
					<view class="z3 flex-1">
						<template v-for="(item,idx) in jmxcxfdr">
							<view class="xcxerexr act ab">
								{{item}}
								<text class="iconfont icon-close1 fz24" @tap.stop="kmxcret(idx)"></text>
							</view>
						</template>
					</view>
					<view class=" vertical-center">
						<text class="iconfont icon-rightyou"></text>
					</view>
				</view>
				<view class="pt10 pm10 display-flex fz30 z6 btm">
					<view class="xczvrytxctrtr  vertical-center tl">
						推荐职位:
					</view>
					<view class="z3 flex-1">
						<radio-group class="" @change="kxczxtrty">
							<label class="xzczxctrt mr20">
								<view class="display-flex">
									<view>
										<radio :checked="!dataForm.isGood" :value="false" class="kcxzvxcdrytr" />
									</view>
									<view class="fz28 fgfdgdfgbty">不推荐</view>
								</view>
							</label>
							<label class="xzczxctrt mr20">
								<view class="display-flex">
									<view>
										<radio :checked="dataForm.isGood" :value="true" class="kcxzvxcdrytr" />
									</view>
									<view class="fz28 fgfdgdfgbty">推荐</view>
								</view>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="pt10 pm10 display-flex fz30 z6 btm display-flex">
					缩略图:
					<view class="flex-1 ml20">

						<view class="czxcsderexcr ab vertical-center pr" @tap="kxmcfdf">
							<text class="iconfont icon-14CIRCLE clofdfdtrtrt" @tap.stop="dataForm.img=''"
								v-if="dataForm.img"> </text>
							<image :src="dataForm.img" class="w100 h100 cz" mode="aspectFill" v-if="dataForm.img">
							</image>
							<text class="iconfont icon-zhaopian xzcertrxcr" v-if="!dataForm.img"></text>
						</view>

					</view>
				</view>

				<view class="pt10 pm10 display-flex fz30 z6">
					轮播图({{jdfdsrt.length}}/5)
				</view>
				<view class="xcxzcsgfgfdgr mt20">
					
					 
						  <template  v-for="(sd,idx) in jdfdsrt">
							  <div v-if="kjxdd(sd)"  class="pr czxcsderexcr">
							        <video :src="sd" class="w100 h100" autoplay  controls muted></video>
									<text class="iconfont icon-14CIRCLE clofdfdtrtrt" @tap="jjmxdsfsd(idx)"></text>
							    </div>
								<view v-else class="pr czxcsderexcr">
									<image :src="sd" class="w100 h100 cz" mode="aspectFill"></image>
									<text class="iconfont icon-14CIRCLE clofdfdtrtrt" @tap="jjmxdsfsd(idx)"></text>
								</view>
						  </template>
				
					<view class="czxcsderexcr vertical-center" @tap="kxmcfdfb" v-if="jdfdsrt.length<5">
						<text class="iconfont icon-zhaopian xzcertrxcr"></text>
					</view>
				</view>
			</view>
		</view>

		<view class="kxczxcstreszxr pd pt30 pm20 mt20">
			<view class="fz32 display-flex pr">
				<view class="flex-1 fz28 z9 cen" v-for="(item,idx) in kmxcfr" @tap="kmxcfe=idx">
					<text class="pr" :class="kmxcfe==idx?'dfsdfersdt':''">
						{{item}}
					</text>
				</view>
			</view>
			<view class="btm mt20 pt20 pm20">
				<view class="" v-if="kmxcfe==0">
					<view class="pt10 pm10 display-flex fz30 z6">
						<view class="xczvrytxctrtr vertical-center tl">
							发薪日:
						</view>
						<view class="z3 flex-1">
							<input v-model="dataForm.payDate" type="text" class="kxcxzrtrtxr pl20"
								placeholder="请输入发薪日" />
						</view>
					</view>
					<view class="pt10 pm10 display-flex fz30 z6">
						<view class="xczvrytxctrtr vertical-center tl">
							薪资详情:
						</view>
						<view class="z3 flex-1">
							<input v-model="dataForm.payContent" type="text" class="kxcxzrtrtxr pl20"
								placeholder="请输入薪资详情" />
						</view>
					</view>
				</view>
				<view class="" v-if="kmxcfe==1">
					<view class="pt10 pm10 display-flex fz30 z6">
						<view class="xczvrytxctrtr vertical-center tl">
							班别:
						</view>
						<view class="z3 flex-1">
							<input v-model="dataForm.classContent" type="text" class="kxcxzrtrtxr pl20"
								placeholder="请输入班别" />
						</view>
					</view>
					<view class="pt10 pm10 display-flex fz30 z6">
						<view class="xczvrytxctrtr vertical-center tl">
							着装:
						</view>
						<view class="z3 flex-1">
							<input v-model="dataForm.dressing" type="text" class="kxcxzrtrtxr pl20"
								placeholder="请输入着装" />
						</view>
					</view>
					<view class="pt10 pm10 display-flex fz30 z6">
						<view class="xczvrytxctrtr vertical-center tl">
							站坐:
						</view>
						<view class="z3 flex-1">
							<input v-model="dataForm.posture" type="text" class="kxcxzrtrtxr pl20"
								placeholder="请输入站坐" />
						</view>
					</view>
				</view>

				<view class="" v-if="kmxcfe==2">
					<view class="pt10 pm10 display-flex fz30 z6">
						<view class="xczvrytxctrtr vertical-center tl">
							年龄:
						</view>
						<view class="z3 flex-1">
							<input v-model="dataForm.ageContent" type="text" class="kxcxzrtrtxr pl20"
								placeholder="请输入年龄" />
						</view>
					</view>
					<view class="pt10 pm10 display-flex fz30 z6">
						<view class="xczvrytxctrtr vertical-center tl">
							身份证:
						</view>
						<view class="z3 flex-1">
							<input v-model="dataForm.idCard" type="text" class="kxcxzrtrtxr pl20"
								placeholder="请输入身份证" />
						</view>
					</view>
					<view class="pt10 pm10 display-flex fz30 z6">
						<view class="xczvrytxctrtr vertical-center tl">
							纹身:
						</view>
						<view class="z3 flex-1">
							<input v-model="dataForm.tattoo" type="text" class="kxcxzrtrtxr pl20" placeholder="请输入纹身" />
						</view>
					</view>
					<view class="pt10 pm10 display-flex fz30 z6">
						<view class="xczvrytxctrtr vertical-center tl">
							英文:
						</view>
						<view class="z3 flex-1">
							<input v-model="dataForm.english" type="text" class="kxcxzrtrtxr pl20"
								placeholder="请输入英文" />
						</view>
					</view>
				</view>

				<view class="" v-if="kmxcfe==3">
					<view class="pt10 pm10  fz30 z6">

						<view class="z3 flex-1">
							<textarea v-model="dataForm.companyContent" class="xczxcerwtx"
								placeholder="请输入公司简介"></textarea>
						</view>
					</view>
				</view>
				<view class="" v-if="kmxcfe==4">

					<view class="pt10 pm10 display-flex fz30 z6">
						<view class="xczvrytxctrtr vertical-center tl">
							厂址:
						</view>
						<view class="z3 flex-1">
							<input v-model="dataForm.jobAddress" type="text" class="kxcxzrtrtxr pl20"
								placeholder="请输入厂址" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="czxctretrcxt vertical-bottom" v-if="kmxcxfer">
		<view class="w100 bgff">
			<view class="pd pt20 pm20 display-flex">
				<view class=" flex-1 vertical-center tl">
					<text class="kkxczxerwt">请选择公司</text>
				</view>
				<view class="">
					<text class="iconfont icon-14CIRCLE red fz40 cz" @tap="kmxcxfer=false"></text>
				</view>
			</view>
			<view class="btm pd pt20 pm20 cxzczxtrtrecst">
				<listOfCompanies @success="getdatase"></listOfCompanies>
			</view>
		</view>
	</view>

	<view class="czxctretrcxt vertical-bottom" v-if="kmxcxferb">
		<view class="w100 bgff">
			<view class="pd pt20 pm20 display-flex">
				<view class=" flex-1 vertical-center tl">
					<text class="kkxczxerwt">请选择招聘人</text>
				</view>
				<view class="">
					<text class="iconfont icon-14CIRCLE red fz40 cz" @tap="kmxcxferb=false"></text>
				</view>
			</view>
			<view class="btm pd pt20 pm20 cxzczxtrtrecst">
				<jobListings @success="getdataseb"></jobListings>
			</view>
		</view>
	</view>



	<view class="czxctretrcxt vertical-bottom" v-if="kmxcxferc">
		<view class="w100 bgff">
			<view class="pd pt20 pm20 display-flex">
				<view class=" flex-1 vertical-center tl">
					<text class="kkxczxerwt">招聘类型</text>
				</view>
				<view class="">
					<text class="iconfont icon-14CIRCLE red fz40 cz" @tap="kmxcxferc=false"></text>
				</view>
			</view>
			<view class="btm pd pt20 pm20 cxzczxtrtrecst">
				<view class="xcxerexr" :class="item.cls" @tap="kxczxtrete(item)" v-for="item in kjmxcrr">
					{{item.dictLabel}}
				</view>
				<view class="z9 fz24">
					温馨提示：点击标签选中
				</view>
				<view class="mt20 pm20">
					<button type="primary" class="fz32" @tap="kmxcxferc=false">关闭</button>
				</view>
			</view>
		</view>
	</view>



	<view class="czxctretrcxt vertical-bottom" v-if="kmxcxferd">
		<view class="w100 bgff">
			<view class="pd pt20 pm20 display-flex">
				<view class=" flex-1 vertical-center tl">
					<text class="kkxczxerwt">添加标签</text>
				</view>
				<view class="">
					<text class="iconfont icon-14CIRCLE red fz40 cz" @tap="kmxcxferd=false"></text>
				</view>
			</view>
			<view class="btm pd pt20 pm20 cxzczxtrtrecst">
				<input type="text" v-model="ixcdfd" class="kxcxzrtrtxr pl20" placeholder="请输入标签名称" />

				<view class=" pm20 mt100">
					<button type="primary" class="fz32" @tap="kxczxretr">确认</button>
				</view>
			</view>
		</view>
	</view>
	
	<view class="kcdxvrtxzty pd pm20 bgff pt20">
		<button type="primary" class="fz32" @tap="tijiao">确定</button>
	</view>
</template>
<script lang="ts" setup>
	import { ref } from "vue"
	import { upImg, hf, yzphone, callBack, zidianall, dxrequest } from "@/util/index.js"
	import { onLoad } from "@dcloudio/uni-app"
	import listOfCompanies from "@/components/listOfCompanies.vue"
	import jobListings from "@/components/jobListings.vue"
	const jdfdsrt = ref([])
	const kmxcfe = ref(0)
	const kmxcxfer = ref(false)
	const kmxcxferb = ref(false)
	const kmxcxferc = ref(false)
	const kmxcxferd = ref(false)
	const ixcdfd = ref()
	const kmxcfr = ref(['薪资待遇', '工作环境', '招聘要求', '企业介绍', '工作地点'])
	const kjmxcrr = ref([])
	const gisdr = ref()
	const jmxcxfdr = ref([])
		const gsid = ref()
	const dataForm = ref({
		name: "",//职位名称
		companyId: "",//公司id
		companyName: "",
		sysUserId: "",//招聘人id
		sysUserName: "",
		pay: "", // 日领薪酬
		payOverall: "", // 综合薪水
		jobDate: "",//招聘时间
		type: "",//类型
		tag: "",//类型
		isGood: "",
		img: "",//缩放图
		banner: "",//轮播图
		payDate: "", //发薪日
		payContent: "",//薪资详情
		classContent: "",//班别
		dressing: "",//着装
		posture: "", //站坐
		ageContent: "", //年龄
		idCard: "",//身份证
		tattoo: "", //纹身
		english: "", //英文
		companyContent: "", //公司简介
		jobAddress: "", //厂址
	})
	const jjmxdsfsd = (idx) => {
		jdfdsrt.value.splice(idx, 1)
	}
	const kxmcfdf = async () => {
		const dhsd = await upImg()
		dataForm.value.img = dhsd.imgurl
	}
	const kxmcfdfb = async () => {
		const dhsd = await upImg()
		jdfdsrt.value.push(dhsd.imgurl)
	}
	const getdatase = (data) => {
		kmxcxfer.value = false
		dataForm.value.companyName = data.companyName
		dataForm.value.companyId = data.id
		dataForm.value.companyContent = data.content
		dataForm.value.jobAddress = data.companyAddr
	}
	const getdataseb = (data) => {
		kmxcxferb.value = false
		dataForm.value.sysUserId = data.id
		dataForm.value.sysUserName = data.realName
	}
	const xczxsdrf = (data) => {
		console.log(data.detail.value)
		dataForm.value.jobDate = data.detail.value
	}
	const kxczxtrete = (data) => {
		if (data.cls) {
			data.cls = ""
		} else {
			data.cls = "act"
		}
	}
	const kxczxtrty = (data) => {
		dataForm.value.isGood = JSON.parse(data.detail.value)
	}
	onLoad(async (data) => {
		const job_type = await zidianall("job_type")
		job_type.map(a => {
			a.cls = ""
		})
		kjmxcrr.value = job_type
		
		if (data.id) {
			gsid.value = true
			kmxcert(data.id)
			uni.setNavigationBarTitle({
				title: "编辑职位"
			})
		}
	})
	const kmxcert = async (id) => {
		const { data } = await dxrequest("/api/job/" + id)
		console.log(data)
		dataForm.value = data
		
		try{
			dataForm.value.type.split(",").map(a=>{
				kjmxcrr.value.map(b=>{
					if(a==b.dictValue){
						b.cls="act"
					}
				})
			})
		}catch(e){
			
		}
		try{
			jmxcxfdr.value= dataForm.value.tag.split(",")
		}catch(e){
			
		}
		try{
			  jdfdsrt.value= dataForm.value.banner.split(",")
		}catch(e){
			
		}
		// const kxcdfft = []
		// kjmxcrr.value.map(a => {
		// 	if (a.cls) {
		// 		kxcdfft.push(a.dictValue)
		// 	}
		// })
		// dataForm.value.type = kxcdfft.join(",")
		// try {
		// 	dataForm.value.tag = jmxcxfdr.value.join(",")
		// } catch (e) {
		
		// }
		// dataForm.value.banner = jdfdsrt.value.join(",")
		
		
	}
	const kxczxretr = () => {
		if (!ixcdfd.value) {
			uni.showToast({
				title: "请输入标签名称",
				icon: "none"
			})
			return
		}
		jmxcxfdr.value.push(ixcdfd.value)
		kmxcxferd.value = false
		ixcdfd.value = ""

	}
	const kmxcret = (idx) => {
		jmxcxfdr.value.splice(idx, 1)
	}
	const tijiao = async () => {
		const kxcdfft = []
		kjmxcrr.value.map(a => {
			if (a.cls) {
				kxcdfft.push(a.dictValue)
			}
		})
		dataForm.value.type = kxcdfft.join(",")
		try {
			dataForm.value.tag = jmxcxfdr.value.join(",")
		} catch (e) {

		}
		dataForm.value.banner = jdfdsrt.value.join(",")
		if (!dataForm.value.name) {
			uni.showToast({
				title: "请输入职位名称",
				icon: "none"
			})
			return
		}
		if (!dataForm.value.companyId) {
			uni.showToast({
				title: "请选择公司",
				icon: "none"
			})
			return
		}
		if (!dataForm.value.sysUserId) {
			uni.showToast({
				title: "请选择招聘人",
				icon: "none"
			})
			return
		}
		if (!dataForm.value.pay) {
			uni.showToast({
				title: "请输入日领薪酬",
				icon: "none"
			})
			return
		}
		if (!dataForm.value.payOverall) {
			uni.showToast({
				title: "请输入综合薪水",
				icon: "none"
			})
			return
		}
		if (!dataForm.value.jobDate) {
			uni.showToast({
				title: "请选择招聘时间",
				icon: "none"
			})
			return
		}
		if (!dataForm.value.type) {
			uni.showToast({
				title: "请选择招聘类型",
				icon: "none"
			})
			return
		}
		if (!dataForm.value.tag) {
			uni.showToast({
				title: "请添加标签",
				icon: "none"
			})
			return
		}
		if (!dataForm.value.img) {
			uni.showToast({
				title: "请上传缩略图",
				icon: "none"
			})
			return
		}
		if (!dataForm.value.banner) {
			uni.showToast({
				title: "请上传轮播图",
				icon: "none"
			})
			return
		}
		console.log(dataForm.value)
		await dxrequest("/api/job", dataForm.value, gsid.value ? "put" : "post")
		uni.showToast({
			title: "添加成功！"
		})
		callBack()
	}
	const kjxdd = (data)=>{
	  let jjdfs = false
	  if(data.indexOf(".mp4")>=0){
	    jjdfs = true
	  }
	  return jjdfs
	}
</script>

<style scoped>
	.czxcsderexcr.ab {
		width: 200rpx;
	}

	.dfsdfersdt {
		color: #333;
	}

	.dfsdfersdt::after {
		content: ' ';
		width: 100rpx;
		height: 6rpx;
		background: #008742;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: -10rpx;
	}

	.xczxcerwtx {
		border-radius: 8rpx;
		border: 2rpx solid #e0e0e0;
		width: 100%;
		padding: 20rpx;
		font-size: 30rpx;
	}

	.xcxerexr {
		font-size: 24rpx;
		display: inline-block;
		border: 2rpx solid #e0e0e0;
		border-radius: 8rpx;
		padding: 10rpx 24rpx;
		margin-right: 14rpx;
		margin-bottom: 20rpx;
		color: #999;
	}

	.xcxerexr.ab {
		padding-right: 10rpx;
	}

	.xcxerexr.act {
		color: #008742;
		border-color: #008742;
		background: #00874220;
	}
</style>